<template>
        <Modal v-model="modal.show" title="绑定代码库" :loading="modal.loading" @on-ok="handleOk" @on-cancel="hideModal">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="55">
                <FormItem label="代码" prop="gitInfo">
                    <div class="flex">
                        <Cascader :placeholder="loading ? '数据加载中...':'代码库'" :not-found-text="codeNotFoundText" class="code-cas" v-model="formValidate.gitInfo" :data="codeData" :load-data="queryGitProjectBranch" style="width:100%;" filterable/>
                        <Button icon="md-add" @click="showGitEdit" class="ml10"></Button>
                        <Button icon="ios-refresh" @click="queryGitProject" class="ml10"></Button>
                        <gitEdit ref="gitEdit" title="代码库" @ok="queryGitProject"></gitEdit>
                    </div>
                </FormItem>
            </Form>
        </Modal>
</template>
<script>
import {queryGitProject,queryGitProjectBranch} from '../api/gitManage.js';
import {bindVmCode} from '../api/content.js';
import gitEdit from '../gitManage/edit.vue'
export default {
    name:'CodeModal',
    components:{gitEdit},
    props:{
        vmId:{
            type:String,
            default:''
        },
        contentId:{
            type:String,
            default:''
        },
        codeId:{
            type:String,
            default:''
        },
        
    },
    data(){
        return {
            modal:{
                show:false,
                loading:true
            },
            codeData:[],
            branchData:[],
            formValidate:{
                gitInfo:[]
            },
            ruleValidate:{
                gitInfo:[
                    { required:true,type:'array',min:2,max:2,message:'请选择代码库'}
                ]
            },
            codeNotFoundText:'数据加载中...',
            loading:false
        }
    },
    mounted(){
        this._formValidate = {...this.formValidate};
        this.queryGitProject();
    },
    methods:{
        showModal(data){
            this.modal.show = true;
            if(data){
                this.formValidate.gitInfo = [data.codeId,data.codeBranchName];
            }else{
                this.formValidate.gitInfo = []
            }
        },
        handleOk(){
            this.$refs.formValidate.validate(async (valid) => {
                if(valid){
                    let codeId = this.formValidate.gitInfo[0];
                    let codeName = this.codeData.find(code => code.value === codeId).label
                    let reqData = {
                        "cloneStatus": 0,
                        "codeBranchName": this.formValidate.gitInfo[1],
                        "codeId": codeId,
                        "codeName": codeName,
                        "contentId": this.contentId,
                        "vmId": this.vmId
                    }
                    await this.bindVmCode(reqData);
                    this.modal.show = false;
                }else{
                    this.cancelLoading();
                }
            }).catch(error => {
                this.cancelLoading()
            })
        },
        bindVmCode(reqData){
            return new Promise((resolve,reject) => {
                bindVmCode(reqData).then(({code,data,message}) => {
                    if(code === 1){
                        this.$Message.info('绑定成功');
                        this.hideModal();
                        this.$emit('ok');
                        resolve();
                    }else{
                        this.$Message.error(message);
                    }
                }).finally(() => {
                    this.cancelLoading()
                })
            })
        },
        queryGitProject(){
            this.loading = true;
            let query = { pageIndex:1,pageSize:9999 };
            queryGitProject(query)
            .then((res) => {
                if (res.code == 1 && res.data) {
                    const data = res.data.items.filter(item => item.branchNum > 0);
                    if(data.length === 0){
                        this.codeNotFoundText = '暂无数据'
                    }else{

                    }
                    this.codeData = data.map(item => {
                        return {
                            value: item.id,
                            label: item.name,
                            children: [],
                            loading: false
                        }
                    });
                } else {
                    this.codeData = []
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
            })
        },
        queryGitProjectBranch(item, callback){
            item.loading = true;
            let query = { pageIndex:1,pageSize:9999,projectId:item.value};
            queryGitProjectBranch(query).then((res) => {
                if (res.code == 1 && res.data) {
                    const data = res.data.items;
                    item.children = data.map(item => {
                        return {
                            value: item.name,
                            label: item.name
                        }
                    })
                } else {
                    item.children = [];
                }
                item.loading = false;
                callback();
            })
        },
        hideModal(){
            this.modal.show = false;
            this.resetField();
        },
        resetField() {
            this.formValidate = { ...this._formValidate };
            this.$refs.formValidate.resetFields();
        },
        cancelLoading() {
            this.modal.loading = false;
            setTimeout(() => {
                this.modal.loading = true;
            });
        },
        showGitEdit(){
            this.$refs.gitEdit.showModal();
        }
    }
}
</script>
<style scoped>
.code-cas /deep/ .ivu-cascader-menu-item{
    max-width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.code-cas /deep/ .ivu-cascader-not-found-tip{
    width: 360px;
}
</style>